<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
						mode="widthFix">
					</image>
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							<text>{{ nickName }}</text>
						</view>
					</view>
				</view>
				<view class="header_right">
					<!-- 扫码-->
					<view class="header-icon">
						<scan-QC-codes />
					</view>
					<!-- 设置-->
					<view @click="handleToSetting" class="header-icon">
						<view class="menu-item-box">
							<view class="iconfont icon-settings"></view>
						</view>
					</view>
				</view>

				<view @click="handleToInfo" class="flex align-center personal">
					<text>个人主页</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<!-- 		<view class="content-section">
			<view class="action-item" @click="handleJiaoLiuQun">
			  <view class="iconfont icon-friendfill text-pink icon"></view>
			  <text class="text">交流群</text>
			</view>
		</view> -->
		<view class="content-section">
			<view class="mine-actions grid col-4 text-center">
				<view class="action-item" v-for="order in mergedStatusList" :key="order.title">
					<view class='item' @click="handleOrder(order.status)">
						<text class="count">{{order.count}}</text>
						<text class="text">{{order.name}}</text>
					</view>
				</view>
			</view>

			<view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToPolling">
					<view class="menu-item-box">
						<view class="iconfont icon-sort menu-icon"></view>
						<view>我的巡检</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleCollect">
					<view class="menu-item-box">
						<view class="iconfont icon-favor menu-icon"></view>
						<view>我的收藏</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleTechnology">
					<view class="menu-item-box">
						<view class="iconfont icon-form_light menu-icon"></view>
						<view>技术资料</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleInformation">
					<view class="menu-item-box">
						<view class="iconfont icon-form_fill_light menu-icon"></view>
						<view>行业资讯</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleFault">
					<view class="menu-item-box">
						<view class="iconfont icon-warn menu-icon"></view>
						<view>故障排行</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleRanking">
					<view class="menu-item-box">
						<view class="iconfont icon-selection menu-icon"></view>
						<view>排行榜</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		historyOrderUser
	} from "@/api/repairManage/order.js"
	export default {
		data() {
			return {
				name: this.$store.state.user.name,
				nickName: this.$store.state.user.nickName,
				order_tracking: [{
					'name': '完成订单',
					'status': '3',
				}, {
					'name': '已指派订单',
					'status': '1',
				},{
					'name': '进行中订单',
					'status': '2',
				}, {
					'name': '取消订单',
					'status': '5',
				}],
				mergedStatusList : [],
				orderStats: []
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			},
		},
		created() {
			this.gethistoryOrderList();
		},
		methods: {
			async gethistoryOrderList() {
				historyOrderUser().then(res => {
					this.orderStats = res.rows;
				}).then(() =>{
					this.mergeData()
				})
			},

			// 合并两个数据源
			mergeData() {
				
				// 计算所有状态的总数
				const totalCount = this.orderStats.reduce((sum, stat) => sum + stat.count, 0);

				// 将状态统计转换为映射表 { 状态值: 数量 }
				const countMap = {};
				console.log(this.orderStats);
				this.orderStats.forEach(stat => {
					countMap[stat.order_status] = stat.count;
				});

				// 合并到order_tracking
				this.mergedStatusList = this.order_tracking.map(item => {
					
					if (item.status === '') {
						// 处理"全部订单"
						return {
							...item,
							count: totalCount
						};
					} else {
						// 处理其他状态，若不存在则默认为0
						return {
							...item,
							count: countMap[item.status] || 0
						};
					}
				});
			},
			// 更换头像
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			// 系统设置
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			// 个人主页
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
				console.log(this.$store.state.user)
			},
			// 订单
			handleOrder(res) {
				console.log(res);
				this.$tab.navigateTo('/pages/mine/polling/index?status=' + res)
			},

			// 我的巡检
			handleToPolling() {
				this.$tab.navigateTo('/pages/mine/polling/index')
			},
			// 我的收藏
			handleCollect() {
				this.$tab.navigateTo('/pages/mine/collect/index')
			},
			// 技术资料
			handleTechnology() {
				this.$tab.navigateTo('/pages/mine/technology/index')
			},
			// 登录
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			// 行业资讯
			handleInformation() {
				this.$tab.navigateTo('/pages/mine/information/index')
			},
			// 故障排行
			handleFault() {
				this.$tab.navigateTo('/pages/mine/fault/index')
			},
			// 排行榜
			handleRanking() {
				this.$tab.navigateTo('/pages/mine/ranking/index')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #ffffff;
		background-image: url("@/static/background/mine/mine_background.png");
		background-size: cover;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			position: relative;
			padding: 8% 5% 10% 4%;
			width: 100%;
			// background-color: #3c96f3;
			// color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}

			.header_right {
				position: absolute;
				display: flex;
				right: 25%;
				top: 15%;
				width: 20px;
				height: 20px;
				opacity: 1;

				.header-icon {
					margin-left: 100%;
					margin-right: 100%;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				// background-color: white;

				.action-item {
					.item {
						border: #ffffff 1px solid;
						margin-left: 5px;
						margin-right: 5px;
						border-radius: 10px;

						.icon {
							font-size: 28px;
						}

						.count {
							display: block;
							font-style: oblique 10deg;
							font-size: 20px;
							margin: 8px 0px;
						}

						.text {
							display: block;
							font-style: inherit;
							font-size: 12px;
							margin: 8px 0px;
							font-feature-settings: "kern" on;
							color: #6B7280;
						}
					}

				}
			}
		}

	}
</style>